<template>
    <transition 
            enter-active-class="animate__animated animate__fadeIn"
            leave-active-class="animate__animated animate__fadeOut"
        >
        <div class="smsDialog-wrap" v-show="open">
            <div class="sms-con">
                <h2>请输入验证码</h2>
                <span class="tip">{{length}}位验证码已发送到{{phone}}</span>
                <div class="sms-box">
                    <ul class="nums">
                        <li v-for="(item,i) in length" :key="item" :class="{'active':i<=(code.length-1)}">
                            {{code[i]}}
                        </li>
                    </ul>
                    <input type="text" :maxlength="length" v-model="code" class="ipt">
                </div>
                {{code}}
                <button @click="login">登录</button>
            </div>
        </div>
    </transition>
</template>

<script>
import {mapMutations,mapActions} from 'vuex'
export default {
    name:'smsDialog',
    props:{
        phone:{
            type:String,
            default:''
        },
        open:{
            type:Boolean,
            default:false
        },
        length:{
            type:Number,
            default:6
        }
    },
    data(){
        return {
            code:''
        }
    },
    created(){
        console.log(this.$route.query.preRoute);
    },
    methods:{
        ...mapMutations('user',['SET_USERINFO']),
        ...mapActions('user',['submitLogin']),
        async login(){
            // try{
                await this.submitLogin({phone:this.phone,checkcode:this.code});
                this.$emit('close');
                this.$alert('登录成功');
                let path = this.$route.query.preRoute ? this.$route.query.preRoute : '/main';
                this.$router.replace(path);
            // }catch(e){
            //     console.log(e);
            //     this.$alert('登录失败');
            // }
        }
    }
}
</script>

<style lang="scss" scoped>
    .smsDialog-wrap{
        @include size(100%,100%);
        background: rgba(0,0,0,.5);
        position: fixed;
        top:0;
        left:0;
    }

    .sms-con{
        width:80%;
        @include centerer();
        border-radius: 10px;
        background: #fff;
        padding:20px;

    }

    .tip{
        font-size:12px;
        margin:15px 0;
        display: block;
    }

    .sms-box{
        width:100%;
        height: 44px;
        position: relative;
    }

    .nums{
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height: 34px;
        display: flex;
        li{
            width:34px;
            height: 34px;
            border:1px solid gray;
            margin:0 2px;
            &.active{
                border-color:red;
            }
        }
    }

    .ipt{
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height: 34px;
        z-index:99;
        opacity: 0;
        outline: none;
        border:none;
    }

    
</style>

